<template>
    <div class="ipt">
        <div class="top">
            <div class="left">
                <span>筛选搜索</span>
            </div>
            <div class="right">
                <el-button>重置</el-button>
                <el-button type="primary">查询搜索</el-button>
            </div>
        </div>
        <div class="lab">
            <label class="lab">活动名称</label>
            <el-autocomplete
                v-model="state"
                popper-class="my-autocomplete"
                placeholder="活动名称"
                :trigger-on-focus="false">
            </el-autocomplete>
        </div>
    </div>
    <div class="center">
        <p>数据列表</p>
        <div class="bt">
            <el-button>秒杀时间段列表</el-button>
            <el-button>添加活动</el-button>
        </div>
    </div>

    <div class="box">
  <el-table :data="tableData"  border >
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="title" label="活动标题" />
    <el-table-column modelValue="尚未开始" label="活动状态" />
       <el-table-column prop="startDate" label="开始时间">
        <template #default="{row}">
            {{formatDate(row.createTime)}}
        </template>
    </el-table-column>
    <el-table-column prop="endDate" label="结束时间">
        <template #default="{row}">
            {{formatDate(row.createTime)}}
        </template>
    </el-table-column>
    <el-table-column prop="status" label="上线/下线">
       <template #default="{row}">
         <el-switch  :active-value="1" :inactive-value="0" v-model='row.status'/>
       </template>
    </el-table-column>
    <el-table-column  label="操作" width="200">
      <template #default="{row}">
        <el-button  type="text" 
          >设置商品</el-button
        >
        <el-button type="text"
          >编辑</el-button
        >
        <el-button type="text"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
 </div>

  <el-pagination
      v-model:currentPage="pager.currentPage"
      v-model:page-size="pager.pageSize"
      :small="pager.small"
      :disabled="pager.disabled"
      :background="pager.background"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<script lang='ts' setup>
import dayjs from 'dayjs';
import { getFlashList } from '../../../request/modules/smsFlash';
import { ref,reactive } from 'vue'

const state = ref('');
let tableData = ref([] as {}[]);

function formatDate(time: string) {
  if (!time) return '';
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
}

async function flashList(pageNum:number=1,pageSize:number=5) {
    const flashList = await getFlashList({
        pageNum,
        pageSize
    });
    console.log(flashList);
    if (flashList.code === 200) {
        tableData.value = flashList.data.list;
    }
}
flashList();
// 分页器的默认值
const pager = reactive({
  currentPage: 1,
  pageSize: 5,
  small: true,
  disabled: false,
  background:false,
  total:0
})
// 修改页面
function handleSizeChange() { }
// 
function handleCurrentChange(){ } 


</script>
<style lang='less' scoped>
     .ipt{
        width: 95%;
        height: 150px;
        border: 1px solid #ccc;
        box-shadow: 1px 0 2px;
        margin: 50px auto 0;
        border-radius: 4px;
        .top{
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
                margin-left: 20px;
            }
            .right{
                margin-right: 20px;
            }
        }
        .lab{
            padding: 20px 40px 0;
        }
    }
     .center{
        width: 95%;
        height: 60px;
        border: 1px solid #ccc;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        margin: 20px auto;
        align-items: center;
        box-sizing: border-box;
        padding: 0  20px;
        box-shadow: 1px 1px 2px;
    }
     .box{
      width: 95%;
      margin: 0 auto;
    }
</style>